<template>
  <div class="index">
    <!-- 首页轮播图:引入公共组件swiper -->
    <!-- 动态获取轮播图
    1、引入vue-resource
    2、将获取到的数据变量imglist传递给子组件-->
    <swiper :imglist="imglist"></swiper>

    <!-- 六宫格 每一个格对应一个连接页面，所以改造为路由-->
    <ul class="mui-table-view mui-grid-view mui-grid-9">
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <router-link to="/index/news">
          <img src="../../assets/images/menu1.png" alt>
          <div class="mui-media-body">news</div>
        </router-link>
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <router-link to="/index/imgs">
          <img src="../../assets/images/menu2.png" alt>
          <div class="mui-media-body">imgs</div>
        </router-link>
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <router-link to="/index/goods">
          <img src="../../assets/images/menu3.png" alt>
          <div class="mui-media-body">goods</div>
        </router-link>
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <a href="#">
          <img src="../../assets/images/menu4.png" alt>
          <div class="mui-media-body">location</div>
        </a>
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <a href="#">
          <img src="../../assets/images/menu5.png" alt>
          <div class="mui-media-body">Search</div>
        </a>
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <a href="#">
          <img src="../../assets/images/menu6.png" alt>
          <div class="mui-media-body">Phone</div>
        </a>
      </li>
    </ul>
  </div>
</template>
<script>
// 引入公共子组件轮播图:三步走：引入——挂载——使用
import swiper from "../six-grid/pubcom/swiper.vue";
export default {
  data() {
    return {
      imglist: []
    };
  },
  components: {
    swiper
  },
  created() {
    // 页面已加载，调用获取轮播图的方法
    this.getimg();
  },
  methods: {
    // ajax获取轮播图的方法
    getimg() {
      // bug：一定拼接 路径前边不能加/
      this.$http.get("api/getlunbo").then(res => {
        // console.log(res.body.message);
        // 获取到的数据，存在data变量上，然后在页面中遍历
        this.imglist = res.body.message;
      });
    }
  }
};
</script>
<style lang="less" scoped>
.index {
  .mui-table-view {
    background-color: #fff;
    li {
      background-color: #fff;
      border: none;
      img {
        width: 60px;
      }
    }
  }
}
</style>